import React from "react";
import PropTypes from "prop-types";
import { Row, Col } from "antd";

import "./index.scss";

class BrandItem extends React.Component {
  render() {
    const { name, logo_src, id, height, onClick } = this.props;

    return (
      <Row type="flex" align="middle" className="com-branditem" onClick={()=>onClick(id)}>
        <Col span={12}>
          <Row type="flex" justify="center">
            <img style={{height}} src={logo_src} alt={name}/>
          </Row>
        </Col>
        <Col span={12}><span>{name}</span></Col>
      </Row>
    )
  }
}

BrandItem.propTypes = {
  name: PropTypes.string,
  logo_src: PropTypes.string,
  id: PropTypes.number,

  onClick: PropTypes.func,

  height: PropTypes.number
}


BrandItem.defaultProps = {
  onClick: (id)=>console.log(`Brand Item clicked: ${id}`),
  height: 100,
}


export default BrandItem;